<template>
  <div class="shelf-table-container">
    <el-table :data="tableData" style="width: 100%" size="mini" :header-cell-style="headerCellStyle"
      :cell-style="cellStyle" :border="false">
      <el-table-column prop="layer" label="层号" align="center">
        <template slot-scope="scope">
          <div class="layer-no-cell">
            <span style="color: #999">{{ scope.row.groupName }}{{ scope.row.layer }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="height" label="层高(mm)" width="78" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.height" type="number" min="0"
            @input="(val) => validateInput(val, scope.row, 'height')" @change="handleDataChange" size="mini" />
        </template>
      </el-table-column>
      <el-table-column prop="space" label="间距(mm)" width="100" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.space" placeholder="请选择" @change="handleDataChange" size="mini">
            <el-option v-for="item in spacingOption" :key="item.value" :label="item.label"
              :value="Number(item.value)" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="slots" label="槽数" width="66" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.slots" type="number" min="0"
            @input="(val) => validateInput(val, scope.row, 'slots')" @change="handleDataChange" size="mini" />
        </template>
      </el-table-column>
      <el-table-column prop="slots" label="" width="66" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="handleClear(scope.$index)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'ShelfTable',
    props: {
      // 初始数据
      initialData: {
        type: Array,
        default: () => []
      },
      // 组号
      groupNo: {
        type: [String, Number],
        default: ''
      },
      groupLength: {
        type: [String, Number],
        default: 9
      },
      spacingOption: {
        type: Array,
        default: () => []
      },
      model: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      return {
        tableData: this.initialData.length > 0
          ? this.initialData
          : Array.from({ length: this.groupLength }, (_, index) => ({
            ..._,
            groupName: '',
            layer: this.groupLength - index,
            height: 84,
            space: 100,
            slots: 9,

          }))
      }
    },
    methods: {
      validateInput(value, row, field) {
        if (value === '') {
          row[field] = '';
          return;
        }
        const numValue = parseFloat(value);
        if (numValue <= 0) {
          row[field] = '';
          this.$message.error(`${field === 'height' ? '层高' : '槽数'}必须为正数`);
        }
      },
      handleDataChange() {
        this.$emit('update:data', {
          groupNo: this.groupNo,
          data: this.tableData
        })
      },
      handleClear(index) {
        // 创建新的对象，保留层号和组名
        const clearedRow = {
          layer: this.tableData[index].layer,
          groupName: this.tableData[index].groupName,
          height: 1,
          space: 100,
          slots: 1
        };

        // 使用 Vue.set 确保响应式更新
        this.$set(this.tableData, index, clearedRow);

        // 强制更新表格数据
        this.tableData = [...this.tableData];

        // 触发父组件更新
        this.handleDataChange();
      },
      addRow(a, b, c) {
        const newRow = {
          groupName: this.tableData[0].groupName,
          layer: this.tableData.length + 1,
          height: a,
          space: b,
          slots: c
        }
        this.tableData.unshift(newRow)
        this.handleDataChange()
      },
      removeRows(count) {
        // 从数组末尾删除指定数量的行
        this.tableData.splice(-count);
        // 重新计算层号
        this.tableData.forEach((row, index) => {
          row.layer = this.tableData.length - index;
        });
        this.handleDataChange();
      },
      headerCellStyle() {
        this.handleDataChange()
        return {
          background: 'transparent',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '4px 0'
        }
      },
      cellStyle() {
        return {
          padding: '2px'
        }
      }
    },
    watch: {
      initialData: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            this.tableData = newVal
            console.log(this.groupLength, 'groupLength-------------', this.groupNo)

          }
        },
        deep: true
      },
    }
  }
</script>

<style scoped>
  .shelf-table-container {
    /* padding: 2px; */
  }

  .el-input {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }

  ::v-deep .el-table td {
    padding: 2px 0;
    border-bottom: none;
  }

  ::v-deep .el-table__header th {
    padding: 4px 0;
    border-bottom: 1px solid #EBEEF5;
    background-color: transparent;
  }

  ::v-deep .el-table__header {
    background-color: transparent;
  }

  ::v-deep .el-input__inner {
    height: 24px;
    line-height: 24px;
  }

  ::v-deep .el-select .el-input__inner {
    height: 24px;
    line-height: 24px;
  }

  ::v-deep .el-table::before {
    height: 0;
  }

  ::v-deep .el-table tbody tr:hover>td {
    background-color: transparent !important;
  }

  ::v-deep .el-table__body tr.hover-row>td {
    background-color: transparent !important;
  }

  .layer-no-cell {
    background-color: #f5f7fa;
    border: 1px solid #cbcbcc;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    /* padding: 0 35px; */
    margin: 0;
  }

  ::v-deep .el-table td:first-child {
    background-color: transparent !important;
  }

  ::v-deep .el-table .cell {
    padding: 1px;
  }
</style>